<template>
    <!-- 头部 -->
    <div class="myhead">
        <h2>My ToDo List</h2>
        <div class="box">
            <!--placeholder用于提示输入内容，但不显示  -->
            <input type="text" 
                   placeholder="请输入待办事项..." 
                   class="thing" 
                   v-model="newItem" 
                   @keyup.enter="addTodo">
            <button class="add" @click="addTodo">添加</button>
        </div>
    </div>
    <h2 v-show="todos.length === 0 ">有事情想要去做吗</h2>
    <!-- 待办事项部分，内容动态生成 -->
    <ul>
    <!-- 用key 属性指定唯一的标识符，
    作用：
    1.提高虚拟DOM的渲染效率
    2.能够更好的的帮助组件之间的识别
    3.避免渲染错误，在使用数组的的变化时。 
    -->

        <li 
            v-for="(item, index) in todos" 
            :key="index" 
            :class="{ check: item.completed }"
            >
            <!-- 绑定复选框的点击事件，但是在vue中，响应式系统是其根本核心 -->
            <input type="checkbox" v-model="item.completed">
            {{ item.text }}
            <button class="close" @click="removeTodo(index)">删除</button>
        </li>
    </ul>

    <!-- 底部按钮 -->
    <!-- <div class="todo-item ">
            <input type="checkbox">
            <span>已办事件/全部事件</span>
            <button>清除已办</button>
            <button>清除所有</button>
    </div> -->
    <div class="todo-item" v-show="todos.length > 0">
    <input 
      type="checkbox" 
      v-model="allCompleted"
    >
    <span>已办事项 {{ completedCount }}/全部事项 {{ todos.length }}</span>
    <button @click="clearCompleted()">清除已办</button>
    <button @click="clearAll()">清除所有</button>
  </div>
</template>

<script setup>
// 导入 Vue 的响应式功能，以创建响应式的数据
import { ref, computed } from 'vue'

// 初始化一个响应式的空字符串，用于存储新的待办事项
const newItem = ref('')
// 初始化一个响应式的空数组，用于存储所有的待办事项列表
const todos = ref([])
//ES6 引入的箭头函数语法
const addTodo = () => {
    /*
  在 JavaScript 中，某些值在布尔上下文中会被隐式转换为 true 或 false。
  这种机制被称为 隐式类型转换 或 自动类型转换。具体来说：
        空字符串 ('')、null、undefined、0、NaN 和 false 在布尔上下文中会被视为 假值 (falsy)。
        非空字符串、任何对象（包括数组）、非零数字和 true 会被视为 真值 (truthy)。
        newItem.value.trim()所以这里，这样写，JavaScript 
        会自动将 newItem.value.trim() 的结果转换为布尔值进
    */

    if (newItem.value.trim()) {
        /*问题：本来还说是否可以用add代替，结果不行。
        原因：
        1：push 是 JavaScript 数组的内置方法，用于向数组末尾添加一个或多个元素，并返回新的数组长度。
        由于自己创建的是数组的方式所以用push,
        2.add不是数组的内置方法，所以用add会报错。
        */

        /*问题：使用{ text: newItem.value.trim() }原因
        1：{}表示创建了一个新对象，
        2：text：表示添加一个属性为text的对象。
        3：如果push中直接写入newItem.value.trim()，形成就是一个字符串，也能进行操作。但是在后续的
        扩展中，如需要添加完成状态，需要添加属性等，对象类型拥有的属性值，更容易被操作
         */
        todos.value.push({ text: newItem.value.trim(),completed: false  })
        //添加完以后，进项状态的清空。
        newItem.value = ''
    }
}
        // 自己能够想到方法(方式一)，基本是接套用原生javaScript，但是不方便。
    //    const Completeclick = () =>{
    //      document.querySelectorAll("input").forEach(function(checkbox){
    //       checkbox.addEventListener("click",function(){
    //         if(checkbox.checked){
    //           checkbox.parentNode.classList.add("check");
    //         }else{
    //           checkbox.parentNode.classList.remove("check");
    //         }
    //       })
    //     })
    //    }


        const removeTodo = (index) => {
            todos.value.splice(index, 1);
        };
        // 清除已完成事件
            const clearCompleted = () => {
            todos.value = todos.value.filter(item => !item.completed)
            }
        // 清除所有事件
            const clearAll = () => {
            todos.value = []
            }

        // 计算已完成的待办事项数量
            const completedCount = computed(() => {
            return todos.value.filter(item => item.completed).length
            })
            // 
            const allCompleted = computed({
            get() {
                return todos.value.length > 0 && 
                    todos.value.every(item => item.completed)
            },
            set(value) {
                todos.value.forEach(item => {
                item.completed = value
                })
            }
            })
        </script>

<style scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.myhead {
    background-color: #0b87ff;
    text-align: center;
    padding: 5px 0px 10px 0px;
    color: aliceblue;
}

.myhead .box {
    margin-top: 10px;
    display: flex;
    gap: 5px;
    justify-content: center;
}

.thing {
    width: 300px;
    height: 30px;
    padding: 0 10px;
    border-radius: 3px;
    outline: none;
    border: solid 1px white;
}

.add {
    display: inline-block;
    width: 80px;
    height: 30px;
    background-color: #eee;
    color: #0b87ff;
    line-height: 30px;
    border: none;
    border-radius: 3px;
}

.add:hover {
    cursor: pointer;
    background-color: #fff;
    color: #ff6700;
}

ul li {
    list-style: none;
    position: relative;
    padding-left: 40px;
    height: 40px;
    line-height: 40px;
}

/* 将所有奇数列表项设置为不同的颜色（斑马线）*/
ul li:nth-child(odd) {
    background-color: #f9f9f9;
}

/* 光标移入的时候背景变暗 */
ul li:hover {
    cursor: pointer;
    background-color: #dddddd;
}

/* 单击时，添加背景色并删除文本 */
ul li.check {
    text-decoration: line-through;
    color:red;
}

/* 单击时添加“已选中”标记
ul li.check::before {
    content: '';
    position: absolute;
    border-color: #fff;
    border-style: solid;
    border-width: 0 2px 2px 0;
    top: 10px;
    left: 16px;

    transform: rotate(45deg);
    height: 15px;
    width: 7px;
} */

/* 设置关闭按钮的样式 */
.close {
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 0px 20px;
    font-size: 12px;
}

.close:hover {
    color: white;
}
/* 设置h2 */
h2{
    text-align: center;
}
/* 底部样式 */
.todo-item {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 40px;
  list-style: none;
  border-bottom: 1px solid #eee;
}
.todo-item span,
.todo-item input[type='text'] {
  flex: 1;
  margin: 0 20px;
}
.todo-item button {
  padding: 0 10px;
}
</style>